<template>
    <div>
        <mu-paper :z-depth="5">
        <div style="background-color:#2196f3">
          <br>
    <mu-avatar :size=90 >
    <img :src="avatar">
    </mu-avatar>
    <br>
    <span style="color:white;">{{name}}</span>
    <br>
    <span style="color:white;">服务时长：{{time}}分钟</span>
        </div>
        </mu-paper> 
<mu-paper :z-depth="1" class="demo-list-wrap">
         <mu-list>
    <mu-list-item button :ripple="true" to="index/myacts">
      <mu-list-item-action >
        <mu-icon value="inbox"></mu-icon>
      </mu-list-item-action>
      <mu-list-item-title>我的活动</mu-list-item-title>
    </mu-list-item>
    <mu-list-item button :ripple="true" to="/jilu2">
      <mu-list-item-action>
        <mu-icon value="grade"></mu-icon>
      </mu-list-item-action>
      <mu-list-item-title>服务记录</mu-list-item-title>
    </mu-list-item>
    <mu-list-item button :ripple="true" to="/Person/setPerson">
      <mu-list-item-action>
        <mu-icon value="people"></mu-icon>
      </mu-list-item-action>
      <mu-list-item-title>个人信息</mu-list-item-title>
    </mu-list-item>

    <mu-list-item button :ripple="true" to="/FoundPsw">
      <mu-list-item-action>
        <mu-icon value="build"></mu-icon>
      </mu-list-item-action>
      <mu-list-item-title>修改密码</mu-list-item-title>
    </mu-list-item>
  </mu-list>
  <mu-divider></mu-divider>

  </mu-paper>

        <mu-button full-width color="error" @click="layout()">注销登录</mu-button>    

    </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    axios.get("/api/user/getUserMsg").then(result => {
      let user = result.data;
      this.avatar = user.avatar;
      this.name = user.name;
      this.time= user.time;
    });

    return {
      avatar: "",
      name: "",
      time:null,
    };
  },
  methods: {
    layout() {
      axios
        .get("/api/user/layout")
        .then(result => {
          console.log(result);
        })
        .catch(function(err) {
          console.log(err);
        });
      this.$router.push("/login");
    }
  }
};
</script>
<style>
.demo-list-wrap {
  width: 100%;
}
</style>